<template>
	<el-drawer title="配置菜单" :visible.sync="visible" size="360px" append-to-body>
		<div class="sw_menu_container" v-loading="loading">
			<el-tree
				ref="tree"
				nodeKey="id"
				:data="grantMenu"
				:props="defaultProps"
				:expand-on-click-node="false"
				:default-checked-keys="defaultChecked"
				show-checkbox
				default-expand-all
				check-on-click-node
				check-strictly
			></el-tree>
			<div class="button">
				<el-button size="small" @click="visible = false">取消</el-button>
				<el-button size="small" type="primary" :loading="btnLoading" @click="handleUpdateGrant">确定</el-button>
			</div>
		</div>
	</el-drawer>
</template>

<script>
import { mapGetters } from 'vuex';
import { queryGrantMenu } from '@/api/system/tbSysMenu';
import { roleBatchGrant } from '@/api/system/tbSysRoleMenu';
export default {
	props: {
		value: { type: Boolean, default: false },
		data: { type: Object, default: () => {} }
	},
	data() {
		return {
			loading: false,
			visible: this.value,
			grantMenu: [],
			defaultProps: {
				label: 'name',
				children: 'children'
			},
			defaultChecked: [],
			btnLoading: false
		};
	},
	computed: { ...mapGetters(['userInfo']) },
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			this.loading = true;
			this.grantMenu = [];
			this.defaultChecked = [];
			this.getGrantMenuData();
		}
	},
	methods: {
		//获取授权菜单
		async getGrantMenuData() {
			let result = await queryGrantMenu(this.data.id).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.getCheckedMenu(result.data || []);
				this.$nextTick(() => {
					// this.grantMenu = result.data || [];
					this.getRoleTypeMenu(result.data || []);
				});
			}
		},

		//获取选中的菜单
		getCheckedMenu(data) {
			data.forEach((item) => {
				if (!!item.checked) {
					this.defaultChecked.push(item.id);
				}
				if (!!item.childList && item.childList.length > 0) {
					this.getCheckedMenu(item.childList);
				}
			});
		},

		//按照角色类型获取菜单
		getRoleTypeMenu(data) {
			let menuData = this.$treeToFlat(data, 'childList');
			if (this.userInfo.account === 'admin') {
				this.grantMenu = this.$flatToTree(menuData, 'pid');
			} else {
				let filterMenu = menuData.filter((n) => {
					return n.style === '0' || n.style === this.data.type;
				});
				this.grantMenu = this.$flatToTree(filterMenu, 'pid');
			}
		},

		//提交授权变化
		async handleUpdateGrant() {
			let params = { roleId: this.data.id };
			let curChecked = this.$refs['tree'].getCheckedKeys();
			let diffChecked = this.$getArrDifference(curChecked, this.defaultChecked);
			params['menuList'] = diffChecked.map((item) => {
				let obj = { relId: item };
				if (this.defaultChecked.indexOf(item) === -1) {
					obj['operType'] = '1';
				} else {
					obj['operType'] = '2';
				}
				return obj;
			});
			this.btnLoading = true;
			this.updateGrantRequest(params);
		},

		//授权变化请求
		async updateGrantRequest(params) {
			let result = await roleBatchGrant(params).then((res) => res.data);
			this.btnLoading = false;
			if (result.code === '0') {
				this.visible = false;
				this.$store.dispatch('getPermissionMenu');
				this.$showCustomMessage('success', `更新授权成功`);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.sw_menu_container {
	display: flex;
	flex-direction: column;
	height: 100%;
	.el-tree {
		flex: 1;
		padding: 15px 0;
		overflow: auto;
	}
	.button {
		padding: 15px;
		flex-shrink: 0;
		text-align: right;
		border-top: solid 1px #dcdfe6;
	}
}
</style>
